<template>
  <div>
    <template v-for='menu in menuList'>
      <!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
      <el-submenu
        v-if='menu.menuChilds.length>0'
        :index='menu.menuUrl'
        :key="menu.menuId"
      >
        <template slot="title">
          <i v-if="menu.menuImgClass" :class="menu.menuImgClass"></i>
<!--          <span v-if="menu.menuImgClass" class="iconfont icon-shouye1"></span>-->
          <span slot="title" class="menuTitle">{{ menu.menuName }}</span>
        </template>
        <!-- 调用自身  此处是重点-->
        <MenuTree :menuList='menu.menuChilds'></MenuTree>
      </el-submenu>
      <!-- 如果没有子菜单，则显示当前内容 -->
      <el-menu-item
        v-else
        :index='menu.menuUrl'
        :key='menu.menuId'
      >
        <i v-if="menu.menuImgClass" :class="menu.menuImgClass"></i>
          <span slot="title">{{ menu.menuName }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'MenuTree',
  props: {
    menuList: {
      type: Array,
      required: false
    }
  }
}
</script>

<style scoped>
  /deep/.el-menu{
    overflow: visible;
  }
  /deep/.el-menu-item{
    /*float: right;*/
    padding-left: 40px !important;
    box-sizing: border-box;
    height: 60px;
    line-height: 60px;
  }
  /deep/.el-submenu__title{
    padding-left: 40px !important;
    box-sizing: border-box;
    /*float: right;*/
    height: 60px;
    line-height: 60px;
  }
  /deep/.el-submenu .el-menu-item{
    padding-left: 70px !important;
    box-sizing: border-box;
  }
  /deep/.el-menu-item span{
    font-family: 'Arial Normal', 'Arial' !important;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    color: #333333;
  }
  /deep/.el-submenu__title span{
    font-family: 'Arial Normal', 'Arial' !important;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    color: #333333;
  }
  /deep/.el-menu-item i{
    font-size: 26px;
    display: inline-block;
    margin-right: 10px;
  }
  /deep/.el-submenu__title i:first-child{
    font-size: 26px;
    display: inline-block;
    margin-right: 10px;
  }
  /deep/.el-menu-item:hover{
    background: linear-gradient(to right,#FDFEFF 10%,#EDF3FE 90%) !important;

  }
  /deep/.el-menu-item:hover span{
    color: #8CB3FD;
  }
  /deep/.el-menu-item:hover i{
    color: #8CB3FD;
  }
  /deep/.el-submenu__title:hover span{
    color: #8CB3FD;
  }
  /deep/.el-submenu__title:hover i{
    color: #8CB3FD;
  }
  /deep/.el-menu-item.is-active{
    background: linear-gradient(to right,#FDFEFF 10%,#EDF3FE 90%) !important;
  }
  /deep/.el-menu-item.is-active span{
    color: #8CB3FD;
  }
  /deep/.el-menu-item.is-active i{
    color: #8CB3FD;
  }
  /deep/.el-submenu__title:hover{
    background: linear-gradient(to right,#FDFEFF 10%,#EDF3FE 90%) !important;
    color: #8CB3FD;
  }
</style>
